<template>
  <div>
    <search-table
      :url="url"
      :requestType="true"
      ref="searchtable"
      :hideSelect="true"
      :columns="columns"
      :form="form"
      style="margin-top:20px;">

      <template slot="searchForm" >
        <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row>
            <a-col :span="6">
              <a-form-item label="平台名称">
                <a-input
                  v-decorator="['name']"
                  placeholder="请输入平台名称">
                </a-input>
              </a-form-item>
            </a-col>

            <a-col :span="6">
              <a-form-item label="环境类型">
                <a-select style="width: 100%" v-decorator="['type']" placeholder="选择环境类型" allowClear>
                  <template v-for="item in list" >
                    <a-select-option :key="item.value" :value="item.value">
                      {{ item.textName }}
                    </a-select-option>
                  </template>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>

        </a-form>
      </template>

      <template slot="oprationRow">
        <a-button @click="addData"><a-icon type="plus" />新增平台</a-button>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">

        <a-button type="primary" @click="editData(record)" ><a-icon type="edit" />编辑</a-button>

        <a-divider type="vertical"></a-divider>

        <a-button type="danger" @click="deletes(record)" ><a-icon type="delete" />删除</a-button>

      </template>

    </search-table>
    <settingsModal
      v-if="visible"
      :visible="visible"
      :title="title"
      :selectData="selectData"
      @cancel="cancelModal"
      @confirm="confirmModal"></settingsModal>
  </div>
</template>

<script>
  import settingsModal from './components/settingsModal'
  import SearchTable from '../../componentswf/searchTable'
  import domain from '../../../domain.js'
  const base = domain.target
  export default {
    name: 'SelfDefindedCode',
    components: {
      SearchTable,
      settingsModal
    },
    created () {
      this.searchTypeList()
    },
    data () {
      return {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
        list: [],
        type: '',
        title: '',
        visible: false,
        // url: 'goldenhome/member/admin_/benefits/card/page',
        // url: '/api/document/searchFileList',
        url: `${base}/url/searchUrlList`,
        form: this.$form.createForm(this, { name: 'table_search' }),
        selectData: null,
        columns: [
          {
            title: '平台名称',
            dataIndex: 'name',
            key: 'name'
            // align: 'center',
            /* customRender:(text,row)=>{
              return <div class="product_td"><table-img src={row.goodsPicture}/><div class="product_name">{text}</div></div>
            } */
          },
          {
            title: '平台地址',
            dataIndex: 'url',
            key: 'url'
          },
          {
            title: '环境类型',
            dataIndex: 'typeName',
            key: 'typeName'
          },
          {
            title: '创建时间',
            dataIndex: 'timecreate',
            key: 'timecreate'
          },
          {
            title: '创建人',
            dataIndex: 'usercreate',
            key: 'usercreate'
          },

          {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            scopedSlots: { customRender: 'operation' }
          }
        ]

      }
    },
    methods: {
      searchTypeList () {
        this.$post(`${base}/url/searchAllType`).then((res) => {
          console.log('res', res)
          if (res.data.code == 20000) {
            this.list = res.data.data
          }
        })
      },
      cancelModal () {
        this.visible = false
      },
      confirmModal (form) {
        //   新增：
        console.log('最终获取的表单信息', form)
        const url = form.hasOwnProperty('id') ? `${base}/url/update` : `${base}/url/insertOne`
        this.selectData = null
        this.$post(url, { ...form }).then((res) => { //
          this.visible = false
          this.$refs.searchtable.handleSearch()
        })
      },
      addData () {
        this.title = '新增'
        this.visible = true
      },

      editData (record) {
        console.log(record)
        this.selectData = record
        this.title = '修改'
        this.visible = true
        // window.open(record.fileurl)

        // let a = document.createElement("a")
        // a.setAttribute("href",record.fileurl)
        // a.setAttribute("target","_blank")
        // document.body.appendChild(a)
        // a.click()
        // document.removeChild(a)
        // this.$router.push({
        //   name: '',
        //   query: {
        //
        //   }
        // })
      },

      addGoods () {
        // 跳到添加商品页面
        this.$router.push({
          name: 'MarketingSelfCreateGoodPagesAddGoods'
        })
      },

      deletes (record) {
        // this.$set(this,"name","wf");  这是不允许的
        console.log('删除', record)
        this.$confirm({
          title: '显示提示',
          content: `删除该文件吗?`,
          okText: '确认',
          cancelText: '取消',
          onOk: () => {
            this.$post(`${base}/url/del/${record.id}`, {}).then(res => {
              if (res && res.data.code == 20000) {
                  this.$message.success('删除成功!')
                  this.$refs.searchtable.refreshTable()
                }
            })
          }
        })
      }
    }
  }

</script>

<style scoped lang="less">

  .product_td{
    display: flex;
    align-items: center;
    .product_name{
      margin-left:6px;
    }
  }
</style>
